<!-- 对 漂浮 组件的编辑 -->
<template>
  <div class="service-edit">
    <div v-loading="loading">
      <div class="notice-u"><i class="el-icon-warning"></i> 支持设置2-5个菜单图标样式</div>
      <div v-if="dataList && dataList.length > 0">
          <div v-for="(item , index) in dataList" :key="index" :name="index">
            <div class="item-li">
                <el-form ref="formValidate" :model="item" :inline="true">
                  <el-form-item>
                    <span class="order-opt">
                      <span @click.stop='orderUp(index)'><i
                          :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow499':true , 'displayNo': index === 0}"></i>
                      </span>
                      <span @click.stop='orderDown(index)'>
                        <i :class="{'icon':true, 'iconfont':true, 'icon-jiantouarrow505':true, 'displayNo': index === (dataList.length - 1)}"></i>
                      </span>
                    </span>
                  </el-form-item>
                  <!-- <el-form-item label="" prop="iconsrc">
                    <div class="icon-box-u">
                      <div class="images-icon" @click="changeIconImage(index)">
                        <el-image :fit="'scale-down'" :src="item.iconsrc" v-if="item.iconsrc"></el-image>
                        <el-image :fit="'scale-down'" :src="imgEmpty.imgtel" v-if="!item.iconsrc && item.mod === 'call'"></el-image>
                        <el-image :fit="'scale-down'" :src="imgEmpty.imgemail" v-if="!item.iconsrc && item.mod === 'email'"></el-image>
                        <el-image :fit="'scale-down'" :src="imgEmpty.imgqq" v-if="!item.iconsrc && item.mod === 'qq'"></el-image>
                        <el-image :fit="'scale-down'" :src="imgEmpty.imglink" v-if="!item.iconsrc && item.mod === 'link'"></el-image>
                        <el-image :fit="'scale-down'" :src="imgEmpty.imgwechat" v-if="!item.iconsrc && item.mod === 'wechat'"></el-image>
                      </div>
                      <div class="delete-u" v-if="item.iconsrc"><i @click.stop="deleteImage(index)"
                        class="el-icon-delete-solid"></i></div>
                    </div>
                  </el-form-item> -->
                  <el-form-item label="" prop="mod">
                    <el-select size="mini" v-model="item.mod" placeholder="请选择" style="width: 80px;" @change="changeMod(index)">
                      <el-option label="电话" value="call"></el-option>
                      <el-option label="QQ" value="qq"></el-option>
                      <el-option label="微信" value="wechat"></el-option>
                      <el-option label="邮件" value="email"></el-option>
                      <el-option label="链接" value="link"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" prop="name" :rules="[{ required: true, message: '请输入文字', trigger: 'blur' }]">
                    <el-input placeholder="展示文字" size="mini" style="width: 80px;" maxlength="64" v-model="item.name" @blur="item.name=$event.target.value.trim()">
                  </el-input>
                  </el-form-item>
                  <el-form-item label="" prop="value" :rules="[{ validator: ((rule, value, callback) => { checkValidator(rule, value, callback, item.mod) }), trigger: 'blur' }]">
                    <el-input :placeholder="item | showPlaceholder" size="mini" style="width: 150px;" maxlength="64" v-model="item.value" @blur="item.value=$event.target.value.trim()">
                  </el-input>
                  </el-form-item>
                  <el-form-item>
                    <span class="item-opt">
                      <el-button v-if="(index + 1) === dataList.length && dataList.length <= 4" @click="addData" type="primary"
                        size="mini" icon="el-icon-circle-plus-outline">
                      </el-button>
                      <el-button v-if="dataList.length > 2" type="danger" size="mini" icon="el-icon-delete" @click="delData(index)"></el-button>
                    </span>
                  </el-form-item>
                </el-form>
            </div>
          </div>
      </div>
    </div>
    <ChooseRepertory ref="chooseImage" />
  </div>
</template>

<script>
import ChooseRepertory from '@/components/common/repertory/ChooseRepertory.vue'
import * as functions from '@/core/functions.js'
export default {
  props: {
    dataListP: {
      type: Array
    },
    repertoryDataP: {
      type: Array
    },
    loading: {
      type: Boolean
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
  },
  data () {
    var checkValidator = (rule, value, callback, mod) => {
      if (mod === 'call') {
        let tel = /^(([0-1]?[0-9]{10})|(([0-9]{3,4}-)?[0-9]{11})|(((([0-9]{3}-)?[0-9]{7,8})|(([0-9]{3,4}-)?[0-9]{4}(-[0-9]{3}))|(([0-9]{4}-)?[0-9]{7}))(-[0-9]{1,4})?)|(\+86[0-9]{7,11}))$/
        if (value === '') {
          callback(new Error('号码不能为空！'))
        } else if (tel.test(value)) {
          return callback()
        } else {
          callback(new Error('请输入有效的号码！'))
        }
      } else if (mod === 'email') {
        let emailReg = /^[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)*@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (value === '') {
          callback(new Error('邮箱不能为空！'))
        } else if (emailReg.test(value)) {
          return callback()
        } else {
          callback(new Error('邮箱格式错误！'))
        }
      } else if (mod === 'qq') {
        let qqReg = RegExp(/^[1-9][0-9]{4,11}$/)
        if (value === '') {
          callback(new Error('QQ不能为空！'))
        } else if (qqReg.test(value)) {
          return callback()
        } else {
          callback(new Error('请输入正确的QQ号码！'))
        }
      } else if (mod === 'link') {
        let linkReg = RegExp(/^(\/|\/\/|http:\/\/|https:\/\/).*?/)
        if (value === '') {
          callback(new Error('链接不能为空！'))
        } else if (linkReg.test(value)) {
          return callback()
        } else {
          callback(new Error('请输入正确的链接地址！'))
        }
      } else if (mod === 'wechat') {
        if (value === '') {
          callback(new Error('微信号不能为空！'))
        } else {
          return callback()
        }
      } else {
        return callback()
      }
    }
    return {
      dialogShow: false,
      formLabelWidth: '80px',
      imgEmpty: imgEmpty,
      bool: true,
      dataList: JSON.parse(JSON.stringify(this.dataListP)),
      repertoryData: null,
      checkValidator
    }
  },
  filters: {
    showPlaceholder (item) {
      if (item.mod === 'call') {
        return '输入电话号码或手机号'
      } else if (item.mod === 'qq') {
        return '输入QQ号码'
      } else if (item.mod === 'email') {
        return '输入邮箱地址'
      } else if (item.mod === 'wechat') {
        return '输入微信号码'
      } else if (item.mod === 'link') {
        return '输入链接地址'
      } else {
        return ''
      }
    }
  },
  watch: {
  },
  methods: {
    orderUp (index) {
      if (index === 0) {
        return
      }
      let order = this.dataList
      let temp = order[index - 1]
      order[index - 1] = order[index]
      order[index] = temp
      this.dataList = JSON.parse(JSON.stringify(order))
    },
    orderDown (index) {
      if (index === (this.dataList.length - 1)) {
        return
      }
      let order = this.dataList
      let temp = order[index + 1]
      order[index + 1] = order[index]
      order[index] = temp
      this.dataList = JSON.parse(JSON.stringify(order))
    },
    addData () {
      let dataItem = {
        iconsrc: '',
        mod: 'call',
        name: '',
        value: ''
      }
      this.dataList.push(dataItem)
    },
    delData (index) {
      this.clearvalidateF()
      this.dataList.splice(index, 1)
    },
    changeMod (index) {
      this.clearvalidateF(index)
    },
    validateF () {
      let bool = true
      if (this.$refs['formValidate']) {
        this.$refs['formValidate'].map(item => {
          item.validate((valid) => {
            if (!valid) {
              bool = false
            }
          })
        })
      }
      return bool
    },
    clearvalidateF (index) {
      if (!index && this.$refs['formValidate']) {
        this.$refs['formValidate'].forEach(item => {
          item.clearValidate()
        })
      }
      if (index && this.$refs['formValidate']) {
        this.$refs['formValidate'][index].clearValidate()
      }
    },
    getDataList () {
      return this.dataList
    },
    getRepertoryData () {
      return this.repertoryData
    },
    changeIconImage (index) {
      this.$refs['chooseImage'].show({ title: '选择图片', max: 1, where: { type: [0, 4] }, fixedCondition: { type: true } }, (repertoryList) => {
        if (repertoryList.length > 0) {
          console.log('repertoryList', repertoryList)
          // icon.repertory = repertoryList[0]
          this.dataList[index].iconsrc = functions.getRepertoryImageSrcByHostRepertory(repertoryList[0])
          this.dataList[index].hrepertory = repertoryList[0]
        }
      })
    },
    deleteImage (index) {
      this.dataList[index].iconsrc = ''
      this.dataList[index].hrepertory = null
    }
  },
  components: {
    ChooseRepertory
  }
}
const imgEmpty = {
  imgqq: '',
  imgemail: '',
  imgtel: '',
  imgwechat: '',
  imglink: ''
}
</script>

<style scoped lang="scss">
.service-edit{
  padding-bottom: 20px;
}
.item-li {
  /deep/ .el-form--inline .el-form-item{
    margin-right: 5px;
    margin-bottom: 7px;
  }
  /deep/ .el-form-item__error{
    padding-top: 0;
  }
}
.order-opt {
  i {
    cursor: pointer;
  }
  .displayNo {
    color: #888888;
    cursor: not-allowed;
    opacity: 0.5;
  }
}

.images-icon{
  width: 28px;
  height: 28px;
  background: #e8e8e8;
  border: 1px solid #DCDFE6;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 7px;
  padding: 1px;
  cursor: pointer;
  /deep/ img {
    width: 24px;
    height: 24px;
  }
}
.icon-box-u {
  position: relative;
  .delete-u {
    position: absolute;
    z-index: 10;
    top: -6px;
    right: -7px;
    color: #258EF9;
    text-align: right;
    font-size: 16px;
    opacity: 0;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.1;
  }
  &:hover .delete-u {
    opacity: 1;
  }
}
</style>
